<template>
    <div class="input-element" :style="{ width: widthValue + 'px' }">
        <div class="name">{{name}}</div>
        <input class="input-content" type="text" :value="value" @input="$emit('input', $event.target.value)">
    </div>
</template>

<script>
export default {
    name: 'InputElement',
    props: {
        value: {
            type: Number,
            default: 3
        },
        widthValue: {
            type: String,
            default: '150'
        },
        name: {
            type: String,
            default: '未输入'
        }
    },
    data() {
        return {

        }
    },
    methods: {

    }
}
</script>

<style>
.input-element {
    width: 150px;
    height: 30px;
    border: 1px solid #d35a5a;
    display: flex;
    justify-content: space-between;
}

.name {
    color: #7938e0;
    font-size: 14px;
}

.input-content {
    color: #000000;
    font-size: 12px;
}
</style>